<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消息中心</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/useCenter.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a>项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
			
		<!--内容 start-->
		<div class="computedContent">
			<div class="maxWidth">
				<div class="contentTop">
					<div class="contentTitle">消息中心</div>
					<div class="contentDec">(共 4784 条通知，其中 未读邮件 0 条)</div>
					<div class="clear"></div>
				</div>
				<div class="infoCenter">
					<div class="projectBox">
						<div class="infoCenterBtnBox">
							<a class="greenBtn" href="javascript:void(0);">全部消息</a>
							<a class="whiteBtn mr10" href="javascript:void(0);">未读</a>
							<a class="whiteBtn mr10" href="javascript:void(0);">全部已读</a>
							<a class="whiteBtn" href="javascript:void(0);">删除</a>
							<div class="clear"></div>
						</div>
						<ul class="infoBox">
							<li class="infoTitle">
								<div class="control allSelecBox">
									<el-checkbox></el-checkbox>
								</div>
								<div class="wid95 hei100 fl">
									<div class="wid33 hei100 words-ellipsis fl">消息类型</div>
									<div class="wid33 hei100 words-ellipsis fl">消息标题</div>
									<div class="wid33 hei100 words-ellipsis fl">时间</div>
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
							</li>
							<li class="infoDec" v-for="dec in list">
								<div class="control oneSelect">
									<el-checkbox></el-checkbox>
								</div>
								<div class="wid95 hei100 fl">
									<div class="wid33 hei100 words-ellipsis fl">{{dec.type}}</div>
									<div class="wid33 hei100 words-ellipsis fl"><a href="01-2.html" class="infoNotice">{{dec.title}}</a></div>
									<div class="wid33 hei100 words-ellipsis fl">{{dec.time}}</div>
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
							</li>
							
							<!--分页器 start-->
							<div class="block pageBox">
								<div class="fr">
									 <span class="demonstration fl">调整每页显示条数</span>
								    <el-pagination
								      @size-change="handleSizeChange"
								      @current-change="handleCurrentChange"
								      :current-page="currentPage1"
								      :page-sizes="[10, 20, 30, 40]"
								      :page-size="10"
								      layout="sizes, prev, pager, next"
								      :total="50"
								      class="fl">
								    </el-pagination>
								    <div class="clear"></div>
								</div>
							   <div class="clear"></div>
							</div>
							<!--分页器 end-->
							
						</ul>
						
					</div>	
				</div>
			</div>
		</div>	
		<!--内容 end-->
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var computedContentMinHeight = $(window).innerHeight() - 60;
			$('.computedContent').css('min-height',computedContentMinHeight + 'px');
			
			//获取infoCenter最小高度
			var infoCenterMinHeight = $(window).innerHeight() - 150;
			$('.infoCenter .projectBox').css('min-height',infoCenterMinHeight + 'px');
			
			//获取content宽度
			var contentWidth = $(window).innerWidth();
			$('.content').css('width',contentWidth + 'px');
			
			//全选控制
			$('.allSelecBox .el-checkbox__input').click(function(){
				var self = $(this);
				if(self.hasClass('is-checked')){
					$('.oneSelect .el-checkbox__input').removeClass('is-checked');
				}else if(!self.hasClass('is-checked')){
					$('.oneSelect .el-checkbox__input').addClass('is-checked');
				}
			});
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var infoBox = new Vue({
			el:'.infoBox',
			data: function(){
				return{
					list:[
						{
							type:'项目通知',
							title:'项目设计方案已经选定，请完善材料采购清单',
							time:'2017-01-01 12:00'
						},
						{
							type:'项目通知',
							title:'项目设计方案已经选定，请完善材料采购清单',
							time:'2017-01-01 12:00'
						},
					],
					currentPage1: 1,
				}
			},
			methods:{
				handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    handleCurrentChange(val) {
			        this.currentPage = val;
			        console.log(`当前页: ${val}`);
			    },
			}    
		});
	</script>
</html>
